<template>
  <div class="home-container">
    <!-- 顶部搜索框 -->
    <form action="/">
      <van-search @click="search" placeholder="请输入搜索关键词" />
    </form>
    <!-- 轮播图区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in homeDataList.banner" :key="item.id">
        <img :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 一级分类列表 -->
    <van-grid square column-num="5" :border="false" icon-size="3rem">
      <van-grid-item v-for="item in homeDataList.channel" :key="item.id" :icon="item.iconUrl" :text="item.name" />
    </van-grid>
    <!-- 优惠卷标题 -->
    <div class="title">
      <span>优惠卷</span>
    </div>
    <!-- 优惠卷 -->
    <div class="Group">
      <!-- 标题样式 -->
      <div class="Group-name" v-for="item in homeDataList.couponList" :key="item.id">
        <div class="left">
          <van-tag type="warning ">{{ item.tag }}</van-tag>
          <span>{{ item.discount }}元</span>
          <span>满{{ item.min }}使用</span>
        </div>
        <div class="right">
          <h4>限时满减卷</h4>
          <p>{{ item.desc }}</p>
          <p>有效期：{{ item.days }}天</p>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="goods" v-for="item in homeDataList.grouponList" :key="item.id">
        <div class="left">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="right">
          <van-row>
            <van-col span="24"
              ><span>{{ item.name }}</span
              ><van-tag type="primary">{{ item.grouponMember }}人成团</van-tag></van-col
            >
          </van-row>
          <van-row>
            <van-col span="24">
              <van-tag type="warning">有效期:{{ item.expireTime }}</van-tag>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24">{{ item.brief }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"
              ><del>现价: ￥{{ item.grouponDiscount }}</del> <span>团购价: ￥{{ item.grouponPrice }}</span></van-col
            >
          </van-row>
        </div>
      </div>
    </div>
    <!-- 品牌制造商直供 -->
    <div class="title">
      <span>品牌制造商直供</span>
    </div>
    <div class="Brand">
      <div class="goods" v-for="item in homeDataList.brandList" :key="item.id">
        <img :src="item.picUrl" alt="" />
        <div>
          <p>{{ item.name }}</p>
          <p>{{ item.floorPrice }} 起</p>
        </div>
      </div>
    </div>
    <!-- 周一周四 新品首发标题 -->
    <div class="title">
      <span>周一周四 新品首发</span>
    </div>
    <!-- 周一周四 新品首发 -->
    <div class="Newproduct">
      <div class="goods" @click="goGoodspage(item)" v-for="item in homeDataList.newGoodsList" :key="item.id">
        <img :src="item.picUrl" alt="" />
        <div>{{ item.name }}</div>
        <div>￥{{ item.retailPrice }}</div>
      </div>
    </div>
    <!-- 人气推荐标题 -->
    <div class="title">
      <span>人气推荐</span>
    </div>
    <div class="hotGoods">
      <van-row @click="recommend(item)" v-for="item in homeDataList.hotGoodsList" :key="item.id">
        <van-col span="8"><img :src="item.picUrl" alt=""/></van-col>
        <van-col span="16">
          <div>{{ item.name }}</div>
          <div class="ccc">{{ item.brief }}</div>
          <div>￥{{ item.retailPrice }}</div>
        </van-col>
      </van-row>
    </div>
    <!-- 专题精选标题 -->
    <div class="title">
      <span>专题精选</span>
    </div>
    <div class="topics">
      <van-swipe :show-indicators="false" class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in homeDataList.topicList" :key="item.id">
          <img :src="item.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 最下面的商品列表 -->
    <div class="familyLife" v-for="item in homeDataList.floorGoodsList" :key="item.id">
      <!-- 居家生活标题 -->
      <div class="title">
        <span>{{ item.name }}</span>
      </div>
      <div class="familyLife-body" @click="familylife(j)" v-for="j in item.goodsList" :key="j.id">
        <!-- 图片 -->
        <img :src="j.picUrl" />
        <div>{{ j.name }}</div>
        <div>￥{{ j.retailPrice }}</div>
      </div>
      <div class="familyLife-bottom-title">
        <span>更多{{ item.name }}好物 ></span>
      </div>
    </div>
  </div>
</template>

<script>
// 搜索页面网页
import Search from '@/views/Tabbar/search/search.vue'
export default {
  name: 'YanxuanshangchengHome',

  data() {
    return {
      // 获取首页的全部数据
      homeDataList: []
    }
  },

  created() {
    // 获取首页数据
    this.getHomeData()
  },

  methods: {
    // 获取首页数据
    async getHomeData() {
      const { data: res } = await this.$get('home/index')
      // 数据打印
      // console.log(res.data.couponList)
      if (res.errmsg !== '成功') {
        return
      }
      // 转存到中间的data中
      this.homeDataList = res.data
    },
    // 搜索按钮
    search() {
      // 跳转到搜索页面
      this.$router.push({ name: 'Search' })
    },
    // 去往周一到周四商品详情页
    goGoodspage(item) {
      console.log(item.id)
      this.$router.push({ path: '/goodsdetailspage', query: { id: item.id } })
    },
    // 人气推荐
    recommend(item) {
      console.log(item.id)
      this.$router.push({ path: '/goodsdetailspage', query: { id: item.id } })
    },
    // 居家生活
    familylife(j) {
      console.log(j.id)
      this.$router.push({ path: '/goodsdetailspage', query: { id: j.id } })
    }
  },
  components: {
    Search //搜索页
    // value: '' // 搜索框的
  }
}
</script>

<style lang="less" scoped>
// 标题样式
.title {
  background-color: #fff;
  text-align: center;
  width: 100%;
  height: 5rem;
  line-height: 5rem;
  // border: 0.1rem solid #ccc;
  margin-top: 1rem;
}
// 轮播图样式
.my-swipe .van-swipe-item {
  width: 37.5rem;
  height: 18.5rem;
  color: #fff;
  font-size: 2rem;
  line-height: 15rem;
  text-align: center;
  // background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}
// 一级分类
.van-grid {
  margin-top: 1rem;
}
// 优惠卷
.Group {
  background-color: #fff;
  padding: 0 1rem;
  // 标题
  .Group-name {
    margin-top: 0.5rem;
    display: flex;
    width: 100%;
    height: 8rem;
    background-color: #cdac74;
    .left {
      display: flex;
      flex-direction: column;
      width: 30%;
      .van-tag {
        width: 4rem;
      }
      > span {
        margin-left: 1rem;
      }
      > span:nth-child(1) {
        margin-top: 0.5rem;
      }
      > span:nth-child(2) {
        color: red;
        font-size: 1.8rem;
      }
      > span:nth-child(3) {
        color: #fff;
        font-size: 1.2rem;
      }
    }
    .right {
      flex: 1;
      color: #fff;
      p {
        margin: 0;
        font-size: 1.2rem;
      }
      h4 {
        margin: 2rem 1.5rem 0 0;
      }
    }
  }
  // 商品
  .goods {
    border-top: 0.2rem solid #ccc;
    margin-top: 0.3rem;
    display: flex;
    width: 100%;
    height: 10rem;
    // 左边
    .left {
      width: 10rem;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      .van-row:nth-child(1) {
        margin-top: 1rem;
      }
      .van-row:nth-child(2) {
        .van-tag {
          border-radius: 1.5rem;
        }
      }
      .van-row:nth-child(3) {
        font-size: 1.3rem;
        color: #c9c9c9;
      }
      .van-row:nth-child(4) {
        font-size: 1.3rem;
        color: #c9c9c9;
        span {
          color: #cfaf76;
          margin-left: 1rem;
        }
      }
    }
  }
}
// 品牌制造商直供
.Brand {
  background-color: #fff;
  margin-bottom: 8rem;
  display: flex;
  width: 100%;
  height: 15rem;
  border: 0.1rem solid #ccc;
  flex-wrap: wrap;
  > .goods {
    position: relative;
    width: 18.7rem;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      position: absolute;
      top: 0;
      left: 1rem;
      p {
        margin: 0;
        color: #fff;
      }
    }
  }
}
// <!-- 周一周四 新品首发 -->
.Newproduct {
  background-color: #fff;

  display: flex;
  flex-flow: wrap;
  width: 100%;
  height: 52rem;
  // 商品列表
  .goods {
    > div {
      font-size: 1.2rem;
    }
    > div:nth-child(3) {
      color: #d2c8b6;
    }
    text-align: center;
    padding: 1rem;
    width: 14rem;
    height: 12rem;
    margin-left: 2rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// <!-- 人气推荐标题 -->
.hotGoods {
  min-height: 60rem;
  .van-row {
    background-color: #fff;

    margin-top: 1rem;
  }
  img {
    width: 10rem;
    height: 10rem;
  }
  .ccc {
    color: #ccc;
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  > div {
    div:nth-child(3) {
      color: #c3b8a1;
    }
  }
}
// <!-- 专题精选标题 -->
.topics {
  height: 25rem;
}
// <!-- 居家生活标题 -->
.familyLife {
  // margin-bottom: 20px;
  text-align: center;
  height: 60rem;
  width: 100%;
  // border: 1px solid #ccc;
  position: relative;
  // 底部标题样式
  .familyLife-bottom-title {
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    background-color: #fff;
    margin-top: 1rem;
    margin-top: 0.5rem;
  }

  .familyLife-body {
    margin-top: 0.8rem;
    background-color: #fff;
    float: left;
    margin-left: 0.7rem;
    width: 17.5rem;
    height: 23rem;
    border: 0.1rem solid #ccc;
    div:nth-child(3) {
      color: #c1b69d;
    }
    img {
      width: 100%;
      height: 68%;
    }
  }
}
</style>
